
<template>
    <h4>————
        <label style="cursor: pointer;font-weight: 300;color: purple;">
            <span >选择文件:</span>
            <span  id="fftip">{{file_tips}}</span>
            <input type="file" style="display: none;" @change="read_file" id="none_file" multiple="false" 
                    accept=".txt,.log,.md,.ini,.json">
        </label>
        ————基于web技术的文本编辑器—————— <button>保存</button> ————</h4>
    <div class="bodd">
        <p v-for="ss in txt_content" class="txt-dis" contenteditable="plaintext-only">{{ ss }}</p>
    </div>
    <!-- {{ ss.trim().length>0 ? ss : '~' }} -->
</template>

<script setup>
    import {ref,reactive} from 'vue'

    const txt_content = ref([])
    const file_tips = ref("*****")
    function read_file(){
        const input= document.getElementById("none_file")
        file_tips.value = input.files[0].name
        const xsel_file = input.files[0]

        const reader = new FileReader()
        reader.onload= (evt)=>{
            const txt_data = reader.result
            txt_content.value = txt_data.match(/(.*\n|.*\r\n)/g)
            //console.log(txt_content)
        }
        reader.readAsText(xsel_file)

    }

</script>

<style scoped>
.txt-dis{
    text-align: left;
    padding: 0.25em 0;
    margin: 0 1.5em;
    white-space: pre;
}
.txt-dis:nth-of-type(2n){
    background-color: #efefef;
}
.txt-dis pre{
    margin: 0;
    max-width: 100%;
}
.bodd{
    border: 2px solid #a98175;
    border-radius: 0.65em;
    min-height: 5em;
}
#fftip{
    padding:0em 0.8em;
    text-decoration: underline;
    font-size: small;
    font-style: italic;
}
</style>